
import React, {useMemo,useState} from 'react';

    const UseMemoHook = ()=>{
        //变更状态的时候需要传递一个新的值
        let [price,setPrice] = useState([1,2,3])

        let [count,setCount] = useState(10)

        //计算总价
        const cal = ()=>{
            console.log("cal");
            return price.reduce((item,total)=>{
                return total += item
            },0)
        }
        //使用useMemo方法 当依赖值发生变化的时候 会计算一个新的值 并且返回一个新的结果
        let total = useMemo(cal,[price])
        //useCallback 的作用是返回一个函数 这个函数会基于依赖项发生变化 如果依赖不变 函数就不变
        //useMemo和useCallback 的区别？
        // useMemo 返回的是纯结果   useCallback 返回的是函数  都会依赖于值发生变化

        //处理增加price
        const handleClick = ()=>{
            let newVal = price.length *3
            setPrice([...price,newVal])
        }
        //处理count自增
        const incrementCount = () =>{
            setCount(count + 10)
        }
        return(
            <fieldset>
                <legend>UseMemoHook</legend>
                <button onClick ={handleClick}>添加价格</button>
                <button onClick = {incrementCount}>计数器自增</button>
                <h1>总价格:{total}</h1>
                <h1>count的值:{count}</h1>
                <ul>
                    {
                        price.map((item,i) => <li key={i} >{item}</li>)
                    }
                </ul>

            </fieldset>
        )
    }

    export default UseMemoHook